<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body
        {
            background: #000;
        }
        #cl
        {
            position: relative;
            width: 100%;
            height: 200px;
            background: #333;
        }
        .circle
        {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            cursor: pointer;
            position: relative;
            top: 50%;
            left: 50%;
            /*transition和下面的animation动画效果冲突了，这里是多余的*/
            /*transition: all 100s;*/
        }
        .circle:nth-child(1)
        {
            background: #33ffbb;
            /*
             * 动画名称： r0
             * 2s一个周期
             * 延迟为0，即一开始就运行
             * 速度曲线为ease-out,以低速结束一周期
             * infinite，无限次循环
             */
            animation: r0 3s 0s ease-out infinite;
        }
        @keyframes r0
        {
            0%
            {
                box-shadow: 
                0 0 8px 6px rgba(26, 255, 179, 0),
                0 0 0px 0px rgba(26, 255, 179, 0)
            }
            10%
            {
                box-shadow:
                0 0 8px 6px #1affb3,
                0 0 12px 10px #333,
                0 0 12px 14px #1affb3
            }
            100%
            {
                box-shadow:
                0 0 8px 6px rgba(26, 255, 179, 0),
                0 0 0px 40px #333,
                0 0 0px 40px rgba(26, 255, 179, 0)
            }
        }

    </style>
</head>
<body>
    <div id="cl">
        <div class="circle"></div>
    </div>
</body>
</html>